<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px">
      <el-form-item label="商家名称：" prop="name">
        <el-input v-model="brand.name"></el-input>
      </el-form-item>
      <el-form-item label="商家身份：">
        <el-select style="width:100%;" v-model="brand.identityType" placeholder="请选择身份">
          <el-option
            v-for="item in identityTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入驻小区：">
        <el-select multiple :multiple-limit="3" style="width:100%;" v-model="brand.areaIds" placeholder="请选择入住小区，最多3个">
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话：" prop="name">
        <el-input v-model="brand.mobile"></el-input>
      </el-form-item>
      <el-form-item label="省：">
        <el-input v-model="brand.province"></el-input>
      </el-form-item>
      <el-form-item label="市：">
        <el-input v-model="brand.city"></el-input>
      </el-form-item>
      <el-form-item label="区/县：">
        <el-input v-model="brand.area"></el-input>
      </el-form-item>
      <el-form-item label="详细地址：">
        <el-input v-model="brand.address"></el-input>
      </el-form-item>
      <el-form-item label="商家LOGO：" prop="icon">
        <single-upload v-model="brand.icon"></single-upload>
      </el-form-item>
      <el-form-item label="商家封面图：" prop="cover">
        <single-upload v-model="brand.cover"></single-upload>
      </el-form-item>
      <el-form-item label="店铺描述：">
        <el-input
          placeholder="请输入内容"
          type="textarea"
          v-model="brand.introduction"
          :autosize="true"></el-input>
      </el-form-item>
      <el-form-item label="审核状态：">
        {{brand.status == 1?'审核通过':'未审核通过'}}
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('brandFrom')">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import {findDesiginArea} from '@/api/platForm'
  import {findTenantInfo,updateTenantInfo} from '@/api/tenant'
  import SingleUpload from '@/components/Upload/singleUpload'
  const defaultBrand={
    address: '',//详细地址
    province: '',//省
    city: '',//市
    area:'',//区
    icon: '',//logo地址
    cover: '',//商家封面
    identityType: 0,//身份
    introduction: '',//品牌描述
    isRecommend: 0,//是否推荐
    mobile: '',//手机号
    name: '',//品牌名称
    status: 0,
    sort: 0,
    areaIds:[],//关联的小区IDs
    id : '' //详情ID
  };
  export default {
    name: 'BrandDetail',
    components:{
      SingleUpload
    },
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        brand:Object.assign({}, defaultBrand),
        detailId:'',//详情Id
        areaOptions:[],//小区列表
        identityTypeOptions: [{
          value: 0,
          label: '我是工厂'
        }, {
          value: 1,
          label: '我是门店'
        }, {
          value: 2,
          label: '我是品牌商'
        }, {
          value: 3,
          label: '我是装修公司'
        }],
        rules: {
          name: [
            {required: true, message: '请输入商家名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          icon: [
            {required: true, message: '请输入商家logo', trigger: 'blur'}
          ],
          cover: [
            {required: true, message: '请输入商家封面图', trigger: 'blur'}
          ],
          sort: [
            {type: 'number', message: '排序必须为数字'}
          ],
        }
      }
    },
    created() {
      // 获取商家信息
      this.getTenantInfo();
      // 获取小区列表
      this.getDesiginAreaList();
    },
    methods: {
      getTenantInfo(){//获取商家信息
        findTenantInfo().then(response => {
          console.log('response',response)
          this.brand = response.data;
        },error => {
          console.log(error)
        })
      },
      getDesiginAreaList(){
        findDesiginArea({pageNo: 1, pageSize: 1000}).then(response=>{
          const areas = response.data.list;
          const areaList = [];
          areas.forEach(item => {
            areaList.push({
              label: item.name,
              value: item.id
            })
          })
          this.areaOptions = areaList;
        },error => {
          console.log('error',error)
        });
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否提交数据', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              updateTenantInfo(this.brand).then(response => {
                console.log('response',response)
                // this.$refs[formName].resetFields();
                // this.brand = Object.assign({},defaultBrand);
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration:1000
                });
              },error => {
                console.log(error)
              })
            });
          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.brand = Object.assign({},defaultBrand);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>


